import Element from "element-ui";
import Vue from "vue";

/**
 * @description  创建promise modal  动态弹窗
 * @param {any} component 组件
 */
export function createPromiseDialog(component = {}, attrs = {}) {
  const { Dialog } = Element;
  return () => {
    // promise解决销毁问题
    return new Promise((resolve, reject) => {
      const dialogFlag = Vue.observable({
        flag: true,
      });
      const destory = () => {
        dialogFlag.flag = false;
        setTimeout(() => {
          dialogCom.$destroy();
        }, 1000);
      };
      /**@1创建dialog实例 */
      console.log(attrs, "子组件");
      const dialogCom = new Vue({
        render: (h) => {
          return h(
            Dialog,
            {
              props: {
                visible: dialogFlag.flag,
                fullscreen: true,
              },
              on: {
                open() {},
                close() {
                  destory();
                },
              },
            },
            [
              h(component, {
                attrs: {
                  ...attrs,
                },
                props: {
                  ...attrs,
                },
                on: {
                  click(value) {
                    console.log(value, "值");
                  },
                },
              }),
            ]
          );
        },
      });
      /**@2创建el并push到body里面 */
      const el = document.createElement("div");
      el.classList.add("dialogComClass");
      document.body.append(el);
      dialogCom.$mount(el);
      el.remove();
    });
  };
}
